import { Input as AntdInput, InputNumber as AntdInputNumber } from 'antd';
import React from 'react';

import type { InputNumberProps, InputProps } from 'antd';
import type { TextAreaProps } from 'antd/es/input';

import '../styles/input.scss';

import { cn } from '@/utils/common';
import { SvgIcon } from '@/components/icon';

const { TextArea: AntdTextArea, Password: AntdPassword } = AntdInput;

interface CustomInputProps extends InputProps {
  className?: string;
  isError?: boolean;
  errorMessage?: React.ReactNode;
}

export const Input: React.FC<CustomInputProps> = ({
  className = '',
  isError,
  errorMessage,
  ...props
}) => {
  return (
    <div className="flex w-full flex-col">
      <AntdInput
        className={cn('rg-input', className, isError && 'rg-input-status-error')}
        {...props}
        status={isError ? 'error' : undefined}
      />
      {isError && errorMessage && <div className="text-[14px] text-error">{errorMessage}</div>}
    </div>
  );
};

export const Search = ({ className, ...props }: CustomInputProps) => {
  return <Input className={className} {...props} suffix={<SvgIcon icon="work-ic6" size={16} />} />;
};

export const TextArea = ({ className, ...props }: TextAreaProps) => {
  return <AntdTextArea className={className} {...props} />;
};

export const Password = ({ className, ...props }: InputProps) => {
  return <AntdPassword className={className} {...props} />;
};

export const InputNumber = ({ className, ...props }: InputNumberProps) => {
  return <AntdInputNumber className={cn('rg-number-input', className)} {...props} />;
};
